<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title">草稿箱</view>
				<view class="text" @click="cut(!type)">{{type?'编辑':'取消'}}</view>
			</view>
		</view>

		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="select" v-for="(item,i) in 5" :key="i" :class="true ?'aa': ''">
				<uni-icons @click="openPopup()" class="minus" v-if="!type" color="#FF5858" type="minus" size="22"></uni-icons>
				<view class="item">
					<view class="item_top">
						<view>2024-03-27 15:30</view>
						<view>重发</view>
					</view>
					<view class="warp" :class="{'cal' : !type}">
						1111111111111111111111111111111111111111111111111111111111111111111111111
					</view>
					<view class="item_img" v-if="true">
						<image v-for="item2 in 3" src="@/static/logo.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="popup-title">删除动态？</view>
				<view class="popup-sub">确认要删除本条草稿动态</view>
				<view class="popup-footer">
					<view class="cancle" @click="closePopup()">取消</view>
					<view class="confim">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				type: true
			}
		},
		mixins: [navBarMixin],
		onLoad(option) {},
		methods: {
			details() {
				uni.navigateTo({
					url: '/pages/me/rechargeDetails'
				})
			},
			back() {
				uni.navigateBack()
			},
			cut(e) {
				console.log(12121212);
				this.type = e
			},
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 333;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					flex: 1;
					text-align: center;
				}

				.text {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #58A1FF;
					position: absolute;
					right: 30rpx;
					top: 28rpx;
				}
			}
		}

		.main {
			// margin-top: 126rpx;
			margin-top: 246rpx;
			margin: 126rpx 30rpx 60rpx;
			padding: 30rpx 30rpx 60rpx;
			background-color: white;
			border-radius: 10rpx;
			.select {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #EEEEEE;
				margin-bottom: 40rpx;
			}
			.minus {
				margin-right: 20rpx;
			}

			.item {
				flex: 1;
				padding-bottom: 30rpx;
			}

			.item_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					&:nth-of-type(1) {
						font-size: 26rpx;
						color: #999999;
					}

					&:nth-of-type(2) {
						width: 112rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						border-radius: 42rpx;
						font-size: 26rpx;
						color: #58A1FF;
						border: 1rpx solid #58A1FF;
					}
				}

			}

			.item_center>view {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
			}

			.warp {
				// flex: 1;
				// display: flex;
				width: 630rpx;
				font-size: 28rpx;
				margin-top: 24rpx;
				white-space: nowrap;
				/* 禁止文本换行 */
				overflow: hidden;
				/* 隐藏超出部分的内容 */
				text-overflow: ellipsis;
				/* 当文本溢出时显示省略号 */
				// 	display: -webkit-box;
				// 	-webkit-line-clamp: 2;
				// 	-webkit-box-orient: vertical;

			}
			.cal {
				width: 568rpx !important;
			}

			.item_img {
				display: flex;
				margin-top: 20rpx;

				image {
					width: 100%;
					border-radius: 8rpx;

					&:nth-of-type(2) {
						margin: 0 20rpx;
					}
				}
			}
		}
		.popup-box {
			width: 583rpx;
			height: 630rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: cover;
			overflow: hidden;
			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 290rpx;
			}
			.popup-sub {
				margin-top: 46rpx;
				color: #666;
				font-size: 28rpx;
				text-align: center;
			}
			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin: 72rpx 52rpx 0;
				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
					color: #3F93FF;
				}
				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
		}
	}
</style>